let container = document.getElementById('books-container')
fetch('/bookstore/query_all_books.do')
    .then(resp => resp.json())
    .then(books => {
        books.forEach(book => {
            let bookHtml = `
    <article class="box">
    <div class="media">
        <aside class="media-left">
        <img src="images/${book.imagePath}" width="80">
        </aside>
        <div class="media-content">
        <p class="title is-5 is-spaced is-marginless">
            <a href="edit-book.html">${book.title}</a>
        </p>
        <p class="subtitle is-marginless">$$${book.price}</p>
        <div class="content is-small">
            ${book.pages} pages
            <br>
            ISBN: ${book.isbn}
            <br>
            <a href="user.html">Edit</a>
            <span>·</span>
            <a>Delete</a>
            <p></p>
        </div>
        </div>
    </div>
    </article>
            `
            let div = document.createElement('div');
            div.classList.add('column')
            div.classList.add('is-12-tablet')
            div.classList.add('is-6-desktop')
            div.classList.add('is-4-widescreen')
            div.innerHTML = bookHtml
            container.appendChild(div)
        })
    })
